import React from 'react';
import styles from './index.less';
import {Row, Col, Input} from 'antd';
import {connect} from "dva";
import {dateFormat} from "@/utils/time";


class PredictData extends React.Component {

  state = {
    past: {},
    current: {},
    expect: {
      locationFrom: "/",
      locationTo: "/",
      tempFrom: "/",
      tempTo: "/"
    },
    editLocation: false,
    editTemp: false
  };

  componentDidMount() {
    this.props.dispatch({
      type: 'fengxiang/getRule'
    });
  }

  //监听父组件数据更改,return null不做更改
  static getDerivedStateFromProps(nextProps, prevState) {
    const {currentInfo, ruleResult} = nextProps;
    const {current, expect, past} = prevState;

    const result = {current, past,expect}

    if (currentInfo && currentInfo.length > 0 && currentInfo[0] !== current) {
      result.current = currentInfo[0]
      result.past = current

    }

    if (ruleResult && expect !== ruleResult) {
      result.expect = ruleResult
    }

    return {
      ...result
    }
  }

  updateRule = () => {
    const {expect} = this.state;
    const payload = {
      ...expect
    };

    this.props.dispatch({
      type: 'fengxiang/updateRule',
      payload
    });
  }

  render() {
    const {
      width = 100,
      height = 115
    } = this.props;

    const {current, past, expect} = this.state;

    return (
      <Row>
        <Col span={8}>
          <div className={`${styles.cardGrid} ${styles.cardGridHoverable}`}>
            <div className={styles.cardBody}>
              <div className={styles.cardTitle}>
                <span> <i className="el-icon-rank"/>目标状态</span>
              </div>
              <div className="card-description">
                <Row>
                  <Col span={8}>
                    位置/m:
                  </Col>
                  <Col span={7}>
                    <Input size="small" defaultValue={expect.locationFrom} key={expect.locationFrom}
                           style={{border: this.state.editLocation ? "" : "None"}}
                           onClick={() => {
                             this.setState({editLocation: true})
                           }}
                           onBlur={event => {
                             expect.locationFrom = event.target.value
                             this.setState({editLocation: false, expect})
                             this.updateRule()
                           }}
                    />
                  </Col>
                  <Col span={1} style={{textAlign: 'center'}}>
                    <span>-</span>
                  </Col>
                  <Col span={7}>
                    <Input size="small" defaultValue={expect.locationTo} key={expect.locationTo}
                           style={{border: this.state.editLocation ? "" : "None"}}
                           onClick={() => {
                             this.setState({editLocation: true})
                           }}
                           onBlur={event => {
                             expect.locationTo = event.target.value
                             this.setState({editLocation: false, expect})
                             this.updateRule()
                           }}/>
                  </Col>
                </Row>
                {/*终点位置/m: {expect.locationFrom}-{expect.locationFrom}*/}
                {/*终点位置/m: <Input size="small" defaultValue={expect.locationFrom} /> - <Input size="small" defaultValue={expect.locationFrom} />*/}

              </div>
              <div className="card-description">
                <Row>
                  <Col span={8}>
                    温度/℃:
                  </Col>
                  <Col span={7}>
                    <Input size="small" defaultValue={expect.tempFrom} key={expect.tempFrom}
                           style={{border: this.state.editTemp ? "" : "None"}}
                           onClick={() => {
                             this.setState({editTemp: true})
                           }}
                           onBlur={event => {
                             expect.tempFrom = event.target.value
                             this.setState({editTemp: false, expect})
                             this.updateRule()
                           }}
                    />
                  </Col>
                  <Col span={1} style={{textAlign: 'center'}}>
                    <span>-</span>
                  </Col>
                  <Col span={7}>
                    <Input size="small" defaultValue={expect.tempTo} key={expect.tempTo} style={{border: this.state.editTemp ? "" : "None"}}
                           onClick={() => {
                             this.setState({editTemp: true})
                           }}
                           onBlur={event => {
                             expect.tempTo = event.target.value
                             this.setState({editTemp: false, expect})
                             this.updateRule()
                           }}/>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        </Col>
        <Col span={8}>
          <div className={`${styles.cardGrid} ${styles.cardGridHoverable}`}>
            <div className={styles.cardBody}>
              <div className={styles.cardTitle}>
                <span> <i className="el-icon-rank"/>过去状态</span>
              </div>
              <div className="card-description">
                终点位置/m: {past.location ? (past.location/3.64).toFixed(2) : past.location}
              </div>
              <div className="card-description">
                终点温度/℃: {past.temp}
              </div>
            </div>
          </div>
        </Col>
        <Col span={8}>
          <div className={`${styles.cardGrid} ${styles.cardGridHoverable}`}>
            <div className={styles.cardBody}>
              <div className={styles.cardTitle}>
                <span> <i className="el-icon-rank"/>当前状态</span>
              </div>
              <div className="card-description">
                终点位置/m: {current.location ? (current.location/3.64).toFixed(2) : current.location}
              </div>
              <div className="card-description">
                终点温度/℃: {current.temp}
              </div>
            </div>
          </div>
        </Col>
      </Row>
    )
  }
}


export default connect(({fengxiang, global}) => ({
  currentInfo: fengxiang.currentInfo,
  ruleResult: fengxiang.ruleResult,
  global
}))
(PredictData);
